<template>
	<uni-nav-bar title="福利发放详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" v-if="orderLists">
		<view class="space-between list" v-for="item in orderLists.goods_list">
			<image :src="item.image" mode=""></image>
			<view class="direction-start" style="height:153rpx;justify-content:space-between;width:76%;">
				<view class="title">{{item.name}}</view>
				<view class="space-between" style="width:100%;">
					<view v-if="item.type==='gem'" style="font-size: 26rpx;color:#5097FB;">
						蓝宝石
						<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.score}}</text>
					</view>
					<view v-else style="font-size: 26rpx;color:#FE3B2E;">
						钱包价格:<text style="font-size: 24rpx;">￥</text>
						<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.money}}</text>
					</view>
					<view class="text">({{orderLists.driver_name}})</view>
				</view>
				<view class="space-between" style="width:100%;">
					<view style="color:#999;font-size: 26rpx;">{{item.updatetime}}</view>
					<view style="font-size: 26rpx;">x{{item.nums}}</view>
				</view>
			</view>
		</view>
		<view class="space-between top">
			<view>订单号</view>
			<view>{{orderLists.order_sn}}</view>
		</view>
		<view class="space-between top">
			<view>提货数量</view>
			<view>x{{orderLists.nums}} </view>
		</view>
		<view class="space-between top">
			<view>消耗蓝宝石</view>
			<view>{{orderLists.order_score}}</view>
		</view>
		<view class="space-between top">
			<view>消耗钱包余额</view>
			<view>{{orderLists.order_money}}</view>
		</view>
		<view class="space-between top">
			<view>提货方式</view>
			<view>{{orderLists.delivery_type}} </view>
		</view>
		<view class="space-between top">
			<view>提货时间</view>
			<view>{{orderLists.updatetime}} </view>
		</view>
		<view class="space-between top">
			<view>车友</view>
			<view @click="orderLists.driver_mobile?telCall(orderLists.driver_mobile):''">{{orderLists.driver_name}}
				{{orderLists.driver_mobile}} </view>
		</view>
		<view class="space-between top" v-if="orderLists.staff_image">
			<view>照片</view>
			<image :src="orderLists.staff_image" mode="" @click="onPreviewImage"></image>
		</view>
		<view class="space-between top">
			<view>核销人</view>
			<view>{{orderLists.staff_name}}</view>
		</view>
		<view class="space-between top">
			<view>备注</view>
			<view style="width:70%;text-align: right;">{{orderLists.staff_des?orderLists.staff_des:'--'}} </view>
		</view>
	</view>
	<view class="package" v-if="orderLists&&orderLists.fuhe_name">
		<view class="space-between">
			<view>复核人</view>
			<view>{{orderLists.fuhe_name}}</view>
		</view>
		<view class="space-between top">
			<view>复核状态</view>
			<view>{{orderLists.fuhe_status_text}}</view>
		</view>
		<view class="space-between top">
			<view>备注</view>
			<view style="width:70%;text-align: right;">{{orderLists.fuhe_des?orderLists.fuhe_des:'--'}}</view>
		</view>
	</view>
	<view class="but" @click="checkBut" v-if="orderLists&&orderLists.fuhe_status==0">复核</view>
	<!-- 复核弹框 -->
	<CheckPop ref="checkPop" :orderID="orderID" @submit="init" state="doHexiaoFuhe"></CheckPop>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { ref } from 'vue';
	import { telCall } from '@/utils/copyText';
	import CheckPop from '@c/administrator/BulletBox/checkPop.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getHexiaoInfo } from '@/gql/auditor';
	import { showLoading } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	const checkPop = ref(null)
	const orderID = ref()
	const orderLists = ref()
	const imgList = ref([])
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getHexiaoInfo,
			variables: {
				order_id: orderID.value
			},
		};
		toPublish(
			'ql/control/getHexiaoInfo',
			payload,
			(obj : any) => {
				const { getHexiaoInfo } = obj.data;
				orderLists.value = getHexiaoInfo
				if (orderLists.value.staff_image) {
					imgList.value.push(getHexiaoInfo.staff_image)
				}
			}
		);
	}
	function checkBut() {
		checkPop.value.open()
	}
	function onPreviewImage() {
		uni.previewImage({
			current: 0,
			urls: imgList.value
		});
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 20rpx;
	}

	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5px;
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}
	.list {
		margin-bottom:20rpx;
		image {
			width: 153rpx;
			height: 153rpx;
			border-radius: 5px;
		}
	}
     .text {
     	width: 40%;
     	text-align: right;
     	overflow: hidden;
     	text-overflow: ellipsis;
     	white-space: nowrap;
     }
	.title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>